<script>
import {defineComponent} from 'vue'
import NavList from "@/components/NavList.vue";
import Home from "@/components/Home.vue";
import Login from "@/components/Login.vue";
import Reg from "@/components/Reg.vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      showComponent: 0,
      navTitleData: ["首页", "登录页", "注册页"]
    }
  },
  methods: {
    changeShowCom(index) {
      this.showComponent = index
    }
  },
  components: {NavList, Home, Login, Reg}
})
</script>

<template>
  <div class="app">
    <NavList :navTitleData="navTitleData" @changeShowCom="changeShowCom"></NavList>
    <Home v-if="showComponent===0"></Home>
    <Login v-else-if="showComponent===1"></Login>
    <Reg v-else></Reg>
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
